<template>
    <!--按钮操作组-->
    <vxe-table-column ref="fixedColumn" title="操作" field="operates" header-align="center"
                      :align="operates.align || 'left'" :width="operates.width"
                      :fixed="operates.fixed" v-if="showOperates">
        <template slot-scope="scope">
            <div class="operate-group">
                <template v-for="(btn, key) in operates.list">
                    <div class="item" v-if="btn.show && (!btn.filter || btn.filter(scope.row, key))"
                         :key="key" v-permission="btn.permission"
                         :style="{ visibility: (btn.hidden && btn.hidden(scope.row, key)) ? 'hidden' : 'visible' }">
                        <template v-if="btn.tooltip">
                            <el-tooltip :effect="btn.tooltip.effect" :content="btn.tooltip.content"
                                        :placement="btn.tooltip.placement"
                                        :disabled="btn.disabled || btn.tooltip.disabled"
                                        :offset="btn.tooltip.offset" :transition="btn.tooltip.transition"
                                        :visible-arrow="btn.tooltip.visibleArrow"
                                        :popper-options="btn.tooltip.popperOptions"
                                        :open-delay="btn.tooltip.openDelay" :manual="btn.tooltip.manual"
                                        :popper-class="btn.tooltip.popperClass"
                                        :enterable="btn.tooltip.enterable"
                                        :hide-after="btn.tooltip.hideAfter">
                                <el-button v-if="btn.svg"
                                           :type="getBtnProp(btn, 'type', scope)"
                                           :size="getBtnProp(btn, 'size', scope)"
                                           :icon="getBtnProp(btn, 'icon', scope)"
                                           :class="getBtnProp(btn, 'class', scope)"
                                           :style="getBtnProp(btn, 'style', scope)"
                                           :disabled="getBtnProp(btn, 'disabled', scope)"
                                           :plain="getBtnProp(btn, 'plain', scope)"
                                           @click.native.prevent="btn.method(key, scope.row, scope.$index)">
                                    <svg-icon :icon-class="btn.svg.iconClass" :class-name="btn.svg.className" />
                                </el-button>
                                <el-button v-else-if="$utils.isNotEmpty(btn.label)"
                                           :type="getBtnProp(btn, 'type', scope)"
                                           :size="getBtnProp(btn, 'size', scope)"
                                           :icon="getBtnProp(btn, 'icon', scope)"
                                           :class="getBtnProp(btn, 'class', scope)"
                                           :style="getBtnProp(btn, 'style', scope)"
                                           :disabled="getBtnProp(btn, 'disabled', scope)"
                                           :plain="getBtnProp(btn, 'plain', scope)"
                                           @click.native.prevent="btn.method(key, scope.row, scope.$index)"
                                           v-permission="btn.permission">
                                    {{ btn.label }}
                                </el-button>
                                <el-button v-else :type="getBtnProp(btn, 'type', scope)"
                                           :size="getBtnProp(btn, 'size', scope)"
                                           :icon="getBtnProp(btn, 'icon', scope)"
                                           :class="getBtnProp(btn, 'class', scope)"
                                           :style="getBtnProp(btn, 'style', scope)"
                                           :disabled="getBtnProp(btn, 'disabled', scope)"
                                           :plain="getBtnProp(btn, 'plain', scope)"
                                           @click.native.prevent="btn.method(key, scope.row, scope.$index)" />
                            </el-tooltip>
                        </template>
                        <template v-else>
                            <el-button v-if="btn.svg"
                                       :type="getBtnProp(btn, 'type', scope)"
                                       :size="getBtnProp(btn, 'size', scope)"
                                       :icon="getBtnProp(btn, 'icon', scope)"
                                       :class="getBtnProp(btn, 'class', scope)"
                                       :style="getBtnProp(btn, 'style', scope)"
                                       :disabled="getBtnProp(btn, 'disabled', scope)"
                                       :plain="getBtnProp(btn, 'plain', scope)"
                                       @click.native.prevent="btn.method(key, scope.row, scope.$index)">
                                <svg-icon :icon-class="btn.svg.iconClass" :class-name="btn.svg.className" />
                            </el-button>
                            <el-button v-else-if="$utils.isNotEmpty(btn.label)"
                                       :type="getBtnProp(btn, 'type', scope)"
                                       :size="getBtnProp(btn, 'size', scope)"
                                       :icon="getBtnProp(btn, 'icon', scope)"
                                       :class="getBtnProp(btn, 'class', scope)"
                                       :style="getBtnProp(btn, 'style', scope)"
                                       :disabled="getBtnProp(btn, 'disabled', scope)"
                                       :plain="getBtnProp(btn, 'plain', scope)"
                                       @click.native.prevent="btn.method(key, scope.row, scope.$index)">
                                {{ btn.label }}
                            </el-button>
                            <el-button v-else :type="getBtnProp(btn.type,scope.row, scope)"
                                       :size="getBtnProp(btn, 'size', scope)"
                                       :icon="getBtnProp(btn, 'icon', scope)"
                                       :class="getBtnProp(btn, 'class', scope)"
                                       :style="getBtnProp(btn, 'style', scope)"
                                       :disabled="getBtnProp(btn, 'disabled', scope)"
                                       :plain="getBtnProp(btn, 'plain', scope)"
                                       @click.native.prevent="btn.method(key, scope.row, scope.$index)" />
                        </template>
                    </div>
                </template>
            </div>
        </template>
    </vxe-table-column>
</template>

<script>
export default {
    name: "BaseVxeOperateColumn",
    props: {
        operates: {
            type: Object,
            default() {
                return {};
            },
        },
    },
    data() {
        return {};
    },
    computed: {
        btnList() {
            if (this.operates.list) {
                return this.operates.list.filter(_x => _x.show === true);
            }
            return [];
        },
        showOperates() {
            return this.$utils.isNotEmptyList(this.btnList);
        },
    },
    methods: {
        getBtnProp(btn, field, scope) {
            if (!btn) {
                return undefined;
            }
            let propValue = btn[field];
            if (typeof btn[field] === 'function') {
                propValue = btn[field](scope.row, scope);
            }
            if (typeof btn[`${ field }Fn`] === 'function') {
                propValue = btn[`${ field }Fn`](scope.row, scope);
            }
            return propValue;
        },
    },
}
</script>

<style scoped>
.svg-icon {
    font-size: 12px;
    vertical-align: top;
}
</style>
